<template>
  <div>
    <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="obj in employeeList" :key="obj.id" :value="obj.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hSubmit">确定</el-button>
        <el-button @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'DeptDialog',
  props: {
    employeeList: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    originList: {
      type: Array,
      default: () => []
    },
    clickDeparId: {
      type: String,
      default: ''
    }
  },
  data() {
    // 验证部门编码(不能跟所有部门编码重复)
    const validCode = (rule, value, callback) => {
      // 添加子部门时 部门编码跟所有部门都不能重复
      // rule规则对象 value绑定的值 callback回调给验证结果
      // 用 includes方法:让数组直接是code值 判断value是否在这个数组里  如果在返回true
      let codeList = this.originList.map(item => item.code)// ['得到code值']
      if (this.isEdit) {
        // 编辑部门:部门编辑,不能和数组里所有人对比,先把除自己以外的对象过滤出来
        // filter返回符合=>里的条件的对象,形成新数组在原地(不改变原数组)
        // code过滤有问题:编辑的对象本来是code是10001 但是value值改成10009 在全部数组里找到code值为10009对象删除掉
        // 解决:不能用code判断,外面把点击行的部门id传入 通过部门id把正在编辑的这个对象过滤掉
        codeList = this.originList.filter(item => item.id !== this.clickDeparId).map(item => item.code)
      }
      codeList.includes(value) ? callback(new Error(`编码${value}已存在`)) : callback()
    }
    // 验证部门名字(不能和同级部门重复)
    const validName = (rule, value, callback) => {
      // 添加子部门:不能和同级部门重复
      // 点击部门后 怎么找到下级的同级部门
      // 子pid=父id (点击时传过来的就是父id 在originList 找相同的子pid 然后map将同级name统一取出 组成一个新数组)
      let nameList = this.originList.filter(item => item.pid === this.clickDeparId).map(item => item.name)
      if (this.isEdit) {
        // 编辑部门 :不能和同级部门重复
        // 点击部门后 怎么找到同级部门
        // 已知: 所有部门的数组(对象的id和pid) 点击传过来这一行的id
        // 通过id在originList找到点击的部门对象
        const depart = this.originList.find(item => item.id === this.clickDeparId)
        // 找到该部门对象的pid
        const pid = depart.pid
        // 用对象的pid找到所有同级部门(同级部门pid是相同的)同时还要将自己排除 然后map将同级name统一取出 组成一个新数组
        nameList = this.originList.filter(item => item.pid === pid && item.id !== this.clickDeparId).map(item => item.name)
      }
      nameList.includes(value) ? callback(new Error(`${value}已存在`)) : callback()
    }
    return {
      // 表单数据对象
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
  // 添加编辑确认按钮
    hSubmit() {
      this.$refs.deptForm.validate((valid) => {
        if (!valid) return
        // 子传父数据
        this.$emit('departEv', { ...this.form })
        // 清空表单内容(必须3步)
        // 1.el-form上有ref为了获取到el-form组件对象调用内置方法resetFields()
        // 2.el-form上有model='表单对象变量' 把最初始的对象赋予进去,为了重置做准备
        // 3.el-form-item上需要有prop字段,值对应v-model的对象性名(因为它会去form对象里用prop字段找到原来的默认值)
        // 工作原理:调用resetFields()内源码,model选项保存的初始对象和初始对象值,给form对象几个属性,进行初始值覆盖
        // this.form.name=model初始form对象name值(空字符串) 其余四个同理
        // 子this.form和父formObj变量指向的是同一个对象内存空间
        // 所在位置空的时候,就把父formObj影响了,就导致请求时候 发送给后台的都是空值
        //
        // this.$refs.deptForm.resetFields()
        // 直接把form对象替换掉,v-model后面变量改变.vue响应式更新v-model对应绑定标签值(思路和上面不一样)
        // this.form = {
        //   name: '', // 部门名称
        //   code: '', // 部门编码
        //   manager: '', // 部门管理者
        //   introduce: '' // 部门介绍
        // }
        this.$emit('update:dialogVisible', false)
      })
    },

    // 取消编辑确认按钮
    hCancel() {
      // this.$refs.deptForm.resetFields()
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style lang="scss" scoped></style>
